<!-- 出口放箱管理 -->
<template>
  <div class="drop-box-man" v-loading="loadingView"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
      id="box">
    <!-- 查询 -->
      <el-row :gutter="15">
      <el-col :span="24">
        <div style="margin-left: 1px;">
          <el-link type="primary" href="http://101.89.161.32:9200/" target="_blank">中海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/bkplan" target="_blank">航华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://cloud.easipass.com/ols/home.do#" target="_blank">亿通网</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://service.chinaconcord.com:8080/ShippingAgency/PrePlan/PrePlanQuery?TEMPDATAID=E0000D630MZSBM6XB" target="_blank">中和</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.hmm21.com/cms/business/ebiz/trackTrace/trackTrace/index.jsp" target="_blank">现代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://202.136.213.238:8080/ShipSuiteWeb/bi/index.htm" target="_blank">海华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://op.jjshipping.cn/sheir/index-nav.jsp?tdsourcetag=s_pcqq_aiomsg" target="_blank">锦诚</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://sun-dial.com/sundial/control/query" target="_blank">顺德</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.newseas-agent.com/jsFrame/websites/EtrSelect.jsp" target="_blank">新海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.cma-cgm.com/" target="_blank">达飞</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://elines.coscoshipping.com/ebusiness/" target="_blank">中远</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.sinoagentsh.com/Query/Expdo.aspx" target="_blank">外运</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.penavico.sh.cn/proxy/proxy_query.jsp?tab=tab-2#" target="_blank">外代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://61.181.252.146:10091/html/swpt/index" target="_blank">振华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.unisco.com.cn/" target="_blank">联合</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://q.cpsa.net.cn/ckfxcdcx" target="_blank">华港</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/?tdsourcetag=s_pcqq_aiomsg" target="_blank">航华登录</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://web.lindomsc.com/login.aspx" target="_blank">联东</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://e-sinotrans.sinotrans.com/services/login.action" target="_blank">外运放箱网</el-link>
        </div>
        <el-form :model="Data" size="mini" :inline="true" class="demo-form-inline">
          <div>
          <el-form-item>
            <el-date-picker v-model="Data.applyDate" unlink-panels style="width: 210px;" type="daterange" @change="applyDateChange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.shipAgencyName" style="width: 136px;" @change="shipAgencyNameChange" @clear="clearContent" clearable filterable placeholder="船代选择">
              <el-option
                v-for="item in shipAgencyNameOptions"
                :key="item.zjm"
                :label="item.zjm"
                :value="item.shipAgencyId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.company" style="width: 136px;" @change="companyChange" @clear="clearContent" clearable filterable placeholder="船公司选择">
              <el-option
                v-for="item in chuangongshiOptions"
                :key="item.nameCncode"
                :label="item.nameCncode"
                :value="item.boatComId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.customerName" style="width: 136px;" @change="custormerChange" filterable @clear="clearContent" clearable placeholder="用箱人选择">
              <el-option
                v-for="item in customerNameOptions"
                :key="item.FullName"
                :label="item.search"
                :value="item.UserId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.theOperatorId" style="width: 136px;" @change="salesmanChange" @clear="clearContent" filterable clearable placeholder="业务员选择">
              <el-option
                v-for="item in salesmanOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.putBoxPartId" style="width: 136px;" @change="putBoxPartChange" @clear="clearContent" filterable clearable placeholder="放箱员选择">
              <el-option
                v-for="item in putBoxPartOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.boxState" style="width: 136px;" @change="serachOneTableData()" placeholder="状态选择">
              <el-option value="-1" label="全部显示"></el-option>
              <el-option value="0" label="新业务"></el-option>
              <el-option value="1" label="放单中"></el-option>
              <el-option value="2" label="已完成"></el-option>
              <el-option value="3" label="已拒绝"></el-option>
              <el-option value="4" label="没预配"></el-option>
              <el-option value="13" label="有问题"></el-option>
              <el-option value="12" label="爆仓"></el-option>
              <el-option value="5" label="船期早"></el-option>
              <el-option value="6" label="明天放"></el-option>
              <el-option value="8" label="等通知"></el-option>
              <el-option value="9" label="客户取消"></el-option>
              <el-option value="10" label="退单"></el-option>
              <el-option value="14" label="缺箱子"></el-option>
              <el-option value="18" label="已处理"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="Data.putBoxNote" style="width: 136px;" placeholder="请输入放箱备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="Data.blno" style="width: 136px;" placeholder="请输入提单号"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="serachOneTableData"></el-button>
          <el-button size="mini" @click="clearSeach">清空</el-button>
          </div>
          <div>
            筛选状态：
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('-1')">全部显示</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('0')">新业务</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('1')">放单中</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('2')">已完成</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('3')">已拒绝</el-button>

            <el-button class="blueBtn" size="mini" @click="searNewBeuness('4')">没预配</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('13')">有问题</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('12')">爆仓</el-button>

            <el-button class="blueBtn" size="mini" @click="searNewBeuness('5')">船期早</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('6')">明天放</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('8')">等通知</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('9')">客户取消</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('10')">退单</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('14')">缺箱子</el-button>
            <el-button class="blueBtn" size="mini" @click="searNewBeuness('18')">已处理</el-button>
          </div>
          <div style="margin-top: 5px;">
            业务操作：
          <el-button size="mini" class="blueBtn" @click="newOrder">新增订单</el-button>
          <el-button size="mini" class="blueBtn" @click="copyOrder">复制下单</el-button>
          <el-button size="mini" class="blueBtn" @click="exportData">导出</el-button>
          <el-button size="mini" class="yellowBtn" @click="RevokeView">撤销</el-button>
          <el-button size="mini" class="blueBtn" @click="changeOrder">转单</el-button>
          <el-button size="mini" class="blueBtn" @click="moreShipCom">批量修改船代</el-button>
          <el-button size="mini" class="blueBtn" @click="getNoticeClick">预约号</el-button>
          <el-dialog :append-to-body="true" width="300px" title="撤销确认" :visible.sync="revokeView" :close-on-click-modal="false" :show-close="false" v-loading="loadingViewRevoke"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
          确定撤销吗？
          <div slot="footer" class="dialog-footer">
            <el-button @click="revokeClickNo">取 消</el-button>
            <el-button type="primary" @click="Revoke()">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog :append-to-body="true" width="800px" title="预约号" :visible.sync="noticeView" :close-on-click-modal="false" :show-close="false">
          <el-table :data="noticeData" border  highlight-current-row>
            <el-table-column align="center" prop="title" label="标题">
            </el-table-column>
            <el-table-column align="center" prop="content" label="预约号">
            </el-table-column>
            <el-table-column align="center" prop="validTime" label="有效时间">
            </el-table-column>
            <!-- <el-table-column align="center" prop="isTrue" label="对比结果">
              <template slot-scope="scope">
                <span v-if="scope.row.isTrue === 1" style="color: green;">正确</span>
                <span v-else style="color: red;">错误</span>
              </template>
            </el-table-column> -->
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="noticeView = false">确 定</el-button>
            <!-- <el-button type="primary" @click="Revoke()">确 定</el-button> -->
          </div>
        </el-dialog>
          <el-dialog :append-to-body="true" width="500px" title="转单" v-loading="loadingViewOrder"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)" :visible.sync="changeOrderView">
            <el-form :inline="true" label-width="120px">
              <el-form-item label="放箱公司：">
                <el-select v-model="changeOrderPutBoxId" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in changeOrderPutBoxList"
                    :key="item.UserId"
                    :label="item.FullName"
                    :value="item.UserId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input style="width: 300px;" type="textarea" v-model="changeMome"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="changeOrderView = false">取 消</el-button>
              <el-button type="primary" @click="changeOrderClick()">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog :append-to-body="true" width="500px" title="批量修改船代船公司" :visible.sync="moreShipComView">
            <el-form :inline="true" label-width="120px">
              <el-form-item label="船代：">
                <el-select size="mini" style="width: 160px;" v-model="modMoreBoatShip" filterable placeholder="请输入船代" @change="modMoreShipChange">
                  <el-option v-for="item in shipBoatList" :key="item.zjm" :label="item.zjm" :value="item.shipAgencyName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="船公司：">
                <el-select size="mini" v-model="modMoreBatCompany" style="width:200px;" filterable placeholder="请输入船公司" @change="modMoreShipComChange">
                  <el-option
                    v-for="item in shipBoatAndList"
                    :key="item.nameCncode"
                    :label="item.nameCncode"
                    :value="item.nameCn"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="moreShipComView = false">取 消</el-button>
              <el-button type="primary" @click="moreShipComClick()">确 定</el-button>
            </div>
          </el-dialog>

          <span style="margin-left: 89px;">
            自动更新：
            <el-switch
              v-model="wsView"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </span>
          <el-button type="primary" size="mini" @click="tableSetting">列表设置</el-button>
          </div>
          </el-form>
      </el-col>
    </el-row>
    <el-row class="oper-row">
      <div class="right">
        修改状态：
        <el-button size="mini" @click="modifyBoxState('0')" style="color: #333333;">新业务</el-button>
        <el-button size="mini" @click="modifyBoxState('1')" style="color: #67C23A;">放单中</el-button>
        <el-button size="mini" @click="modifyBoxState('2')" style="color: #909399;">已完成</el-button>
        <el-button size="mini" @click="modifyBoxState('3')" class="redBtn">已拒绝</el-button>
        <el-button size="mini" @click="modifyBoxState('4')" class="redBtn">没预配</el-button>
        <el-button size="mini" @click="modifyBoxState('13')" class="yellowBtn">有问题</el-button>
        <el-button size="mini" @click="modifyBoxState('12')" class="redBtn">爆仓</el-button>
        <el-button size="mini" @click="modifyBoxState('8')" class="redBtn">等通知</el-button>
        <el-button size="mini" @click="modifyBoxState('14')" class="redBtn">缺箱子</el-button>
        <el-button size="mini" @click="modifyBoxState('9')" class="redBtn">客户取消</el-button>
        <el-button size="mini" @click="modifyBoxState('10')" class="redBtn">退单</el-button>
        <el-button size="mini" @click="modifyBoxState('5')" class="blueBtn">船期早</el-button>
        <el-button size="mini" @click="modifyBoxState('6')" class="blueBtn">明天放</el-button>
        <el-button size="mini" @click="modifyBoxState('7')" class="blueBtn">已退关</el-button>
        <el-button size="mini" @click="modifyBoxState('18')" class="blueBtn">已处理</el-button>

      </div>
      <el-dialog :append-to-body="true" width="300px" title="未获取到EIR信息" :visible.sync="noEirView" :close-on-click-modal="false" :show-close="false" v-loading="loadingViewNoEir"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
          未获取到EIR信息,确定完成吗？
          <div slot="footer" class="dialog-footer">
            <el-button @click="noEirClickNo">取 消</el-button>
            <el-button type="primary" @click="noEirClick()">确 定</el-button>
          </div>
        </el-dialog>
    </el-row>
    <el-table style="margin-top: 10px;" :height="tableHeight" highlight-current-row :data="tableData" :cell-style="tableRowClass" :row-class-name="tableRowClassName" @cell-dblclick="setmySales" border @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="35">
      </el-table-column>
      <el-table-column  v-for="item in myfieldList" :prop="item.props" :key="item.id" :width="item.width" :label="item.field">
        <template slot-scope="scope">
          <div v-if="item.props === 'clientName'">
            <el-popover
            placement="right"
            width="200"
            trigger="click">
            <div>
              <h4 style="display: inline-block; font: bold">联系方式:</h4> {{scope.row.userInfo[0].mobile2}}
            </div>
            <div>
              <h4 style="display: inline-block; font: bold">电话:</h4> {{scope.row.userInfo[0].phone1}}
            </div>
            <div>
              <h4 style="display: inline-block; font: bold">手机:</h4> {{scope.row.userInfo[0].mobile1}}
            </div>
            <div>
                <h4 style="display: inline-block; font: bold">QQ:</h4> {{scope.row.userInfo[0].qq}}
              </div>
            <div>
              <h4 style="display: inline-block; font: bold">传真:</h4> {{scope.row.userInfo[0].fax}}
            </div>
            <div>
              <h4 style="display: inline-block; font: bold">地址:</h4> {{scope.row.userInfo[0].address}}
            </div>
            <el-button style="padding: 0px; color: #606266;" type="text" slot="reference">{{scope.row.clientName}}</el-button>
          </el-popover>
          </div>
          <div v-else-if="item.props === 'mome'">
            <el-popover
              placement="top"
              width="300"
              trigger="click">
              <div>
                <h4 style="display: inline-block; font: bold"> {{scope.row.mome}}</h4>
              </div>
              <el-button style="padding: 0px; color: #606266; overflow: hidden; white-space:nowrap;" type="text" slot="reference">{{scope.row.mome}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'putBoxNote'">
            <div style="overflow: hidden; white-space:nowrap;">{{scope.row.putBoxNote}}</div>
          </div>
          <div v-else-if="item.props === 'boxState'">
            <el-button type="text" v-if="scope.row.boxState === '新业务'" style="color: black; background: white; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '放单中'" style="color: white; background: #67C23A; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '已完成'" style="color: white; background: #909399; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '已拒绝'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '没预配'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '船期早'" style="color: white; background: #409EFF; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '明天放'" style="color: white; background: #409EFF; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '已退关'" style="color: white; background: #409EFF; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '等通知'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '客户取消'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '退单'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '申请中'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '爆仓'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '有问题'" style="color: white; background: #E6A23C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '缺箱子'" style="color: white; background: #F56C6C; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
            <el-button type="text" v-else-if="scope.row.boxState === '已处理'" style="color: white; background: #409EFF; fontWeight: 700; padding: 5px 5px;">{{scope.row.boxState}}</el-button>
          </div>
           <div v-else>
            {{tableData[scope.$index][item.props]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="60px" align="center" label="操作">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.putBoxFileList.length != 0"
            placement="left"
            width="100"
            trigger="click">
            <div v-for="item in scope.row.putBoxFileList">
              <el-button icon="el-icon-s-order" type="primary" size="mini" @click="lookFiles(item)"></el-button>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesView">
                <embed :src="filesImg" type="application/pdf" width="100%" height="600px">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesImgView">
                <img :src="filesImgSrc" alt="">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesImgView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-button icon="el-icon-delete" type="danger" size="mini" @click="dargerFiles(item)"></el-button>
            </div>
            <el-button slot="reference" style="padding: 0px;" type="primary" size="small" icon="el-icon-s-order"></el-button>
          </el-popover>
          <el-upload style="display: inline-block;" action="http://fx.api.ypt56.net/api/uploadFile" :show-file-list="false" :data="uploadData" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-error="handleAvatarError">
            <el-button style="padding: 0px;" type="primary" size="small" icon="el-icon-upload" @click="uploadFiles(scope.$index, scope.row)" ></el-button>
          </el-upload>

        </template>
      </el-table-column>
    </el-table>
    <el-popover placement="top" ref="operationPopover" v-model="showPopover">
      <el-select v-if="modStatus === 1" size="mini" style="width: 160px;" v-model="modBoatShip" filterable placeholder="请输入船代" @change="modShipChange">
        <el-option v-for="item in shipBoatList" :key="item.zjm" :label="item.zjm" :value="item.shipAgencyName"></el-option>
      </el-select>
      <el-select v-if="modStatus === 1" size="mini" v-model="modBatCompany" style="width:200px;" filterable placeholder="请输入船公司" @change="modShipComChange">
        <el-option
          v-for="item in shipBoatAndList"
          :key="item.nameCncode"
          :label="item.nameCncode"
          :value="item.nameCn"
        ></el-option>
      </el-select>
      <el-input v-if="modStatus === 2" type="textarea" style="width: 380px" size="mini" filterable v-model="modPutBoxNote" placeholder="请输入放箱备注" ></el-input>
      <el-autocomplete
        style="width: 180px"
        size="mini"
        v-if="modStatus === 3"
        v-model="modPublic.boat"
        :fetch-suggestions="shipSearch"
        @select="chuanmingChange"
        placeholder="请输入船名"
        >
        <template slot-scope="{ item }">
          <div>{{ item.value = item.sbv }}</div>
        </template>
      </el-autocomplete>
      <el-input v-if="modStatus === 3" v-model="modPublic.voyage" size="mini" placeholder="请输入航次" auto-complete="off" style="width: 130px"></el-input>
      <el-input v-if="modStatus === 4" style="width: 180px" filterable size="mini" v-model="modPublic.blno" placeholder="请输入提单号" ></el-input>
      <el-input v-if="modStatus === 5" style="width: 160px" :disabled="transferObj === '1'&& shipAgencyIdObj === 'b21d8795-5b1f-4632-aeef-b42183aea19c'"  filterable size="mini" v-model="modPublic.voucherCode" placeholder="请输入制单码" ></el-input>
      <el-select v-if="modStatus === 6" style="width: 80px" size="mini" filterable v-model="modPublic.boxSize" placeholder="请选择">
        <el-option label="20" value="20"></el-option>
        <el-option label="40" value="40"></el-option>
        <el-option label="45" value="45"></el-option>
        <el-option label="10" value="10"></el-option>
        <el-option label="53" value="53"></el-option>
      </el-select>
      <el-select v-if="modStatus === 6" style="width: 80px" size="mini" filterable v-model="modPublic.boxType" placeholder="请选择">
        <el-option label="GP" value="GP"></el-option>
        <el-option label="HC" value="HC"></el-option>
        <el-option label="HG" value="HG"></el-option>
        <el-option label="FR" value="FR"></el-option>
        <el-option label="FQ" value="FQ"></el-option>
        <el-option label="HT" value="HT"></el-option>
        <el-option label="OT" value="OT"></el-option>
        <el-option label="OH" value="OH"></el-option>
        <el-option label="RF" value="RF"></el-option>
        <el-option label="RH" value="RH"></el-option>
        <el-option label="TK" value="TK"></el-option>
        <el-option label="GH" value="GH"></el-option>
        <el-option label="HT" value="HT"></el-option>
        <el-option label="SR" value="SR"></el-option>
        <el-option label="PF" value="PF"></el-option>
        <el-option label="HQ" value="HQ"></el-option>
        <el-option label="HCHT" value="HCHT"></el-option>
        <el-option label="GPHT" value="GPHT"></el-option>
        <el-option label="HCFR" value="HCFR"></el-option>
        <el-option label="HCOT" value="HCOT"></el-option>
      </el-select>
      <el-input v-if="modStatus === 6" style="width: 60px" size="mini" filterable v-model="modPublic.boxnum" placeholder="请输入箱量" ></el-input>
      <el-select v-if="modStatus === 7" @change="yardChange" size="mini" v-model="modPublic.yard" filterable placeholder="请输入提箱点">
        <el-option
          v-for="item in yardOptions"
          :key="item.nameCode"
          :label="item.nameCode"
          :value="item.yardName"
        ></el-option>
      </el-select>
      <div v-if="modStatus === 1" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setBoatShipAndCom()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 2" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setPutBoxNote()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 6" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setTypeNum()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 7" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modYard()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 3" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setBoatVoyage()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 4" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setBlon()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 5" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setCode()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
    </el-popover>
    <!--分页-->
      <div style=" width: 100%; margin: 0 auto;">
        <el-pagination layout="total,prev,pager,next,sizes" :page-size="limit" :page-sizes="[30, 50, 100, 200]" @size-change="handleSizeChange" :total="total" :current-page="page" @current-change="handleCurrentChange"></el-pagination>
      </div>
    <new-order-dialog  v-on:childMethod="getTableDataPage" :visible="boxManView" @visibleChange="boxManVisibleChange"></new-order-dialog>
    <copy-order-dialog  v-on:childMethod="getTableDataPage" :visible="copyBoxManView" :table-index-data="selectedTableData" @visibleChange="copyBoxManVisibleChange"></copy-order-dialog>
    <!-- <details-dialog :visible="detailsView" @visibleChange="detailsViewVisibleChange" :table-index-data="selectedTableData" @getTableData="getTableData"></details-dialog> -->
    <!-- 设置列表 -->
    <list-setting-dialog :table-props="fieldStr" :allList="allStr" :listIndex="listIndex" @changtype="changtype"  :pageName="pageName" :open="open" @close="closeL"></list-setting-dialog>
  </div>
</template>

<script>
import {
  putBoxList,
  updateBoxState,
  boatCompanyList,
  SearchUserInfo,
  updatePutBoxNote,
  updateBoxFeeStatus,
  updateBoatAgentName,
  yardList,
  updateYard,
  exportToExcel,
  revocation,
  shipAgencyList,
  shipCompanyList,
  boatNameList,
  updateBoat,
  updateBoxSize,
  getSalesman,
  delPutBoxFile,
  transferOrder,
  getPutBoxList,
  sinotransBill,
  userInfo,
  getAppoinList
} from './api/putBoxManage'
import {
  getField,
  setputBoxFieldOrder
} from '../finance/api/finance'
import NewOrderDialog from './dialog/NewOrderDialog.vue'
import CopyOrderDialog from './dialog/CopyOrderDialog.vue'
// import DetailsDialog from './dialog/DetailsDialog.vue'
import ListSettingDialog from '../shared/ListSettingDialog'
import { mapState } from 'vuex'
import util from '@util'
export default {
  components: {
    NewOrderDialog,
    // DetailsDialog,
    ListSettingDialog,
    CopyOrderDialog
  },
  data () {
    return {
      detailsView: false,
      wsView: false,
      showPopover: false,
      loadingView: false,
      open: false,
      boxManView: false,
      copyBoxManView: false,
      key: false,
      changeOrderView: false,
      loadingViewNoEir: false,
      moreShipComView: false,
      revokeView: false,
      loadingViewRevoke: false,
      userType: '',
      modStatus: '',
      changeOrderPutBoxId: '',
      changeMome: '',
      changeOrderPutBoxList: [],
      tableHeight: 0,
      cacheId: '', // 缓存辨识ID
      cacheColumnLabel: '', // 缓存表头文本
      modRow: '',
      uploadData: {},
      modPublic: {
        boat: '',
        voyage: '',
        blno: '',
        boxnum: '',
        voucherCode: '',
        boxSize: '',
        boxType: '',
        yard: '',
        yardId: ''
      },
      noEirView: false,
      filesView: false,
      filesImgView: false,
      loadingViewOrder: false,
      noticeView: false,
      limit: 30,
      total: 0,
      page: 1,
      filesImg: '',
      filesImgSrc: '',
      comBoat: '',
      boatAgentId: '',
      modBatCompany: '',
      modPutBoxNote: '',
      modBatCompanyCode: '',
      modBoatShip: '',
      modBoatShipCode: '',
      modMoreBoatShipCode: '',
      modMoreBatCompany: '',
      modMoreBatCompanyCode: '',
      modMoreBoatShip: '',
      transferObj: '',
      shipAgencyIdObj: '',
      listIndex: '',
      fieldStr: '',
      allStr: '',
      allList: [],
      tableData: [],
      shipAgencyNameOptions: [],
      customerNameOptions: [],
      salesmanOptions: [],
      putBoxPartOptions: [],
      selectedTableData: [],
      pageName: '',
      fieldList: [],
      noticeData: [],
      chuangongshiOptions: [],
      chuanmingOptions: [],
      shipBoatList: [],
      shipBoatComList: [],
      shipBoatAndList: [],
      yardOptions: [],
      kehuOptions: [],
      mydata: [],
      Data: {
        applyDate: [],
        boxState: '-1',
        blno: '',
        customerName: ''
      }
    }
  },
  async mounted () {
    this.getUserInfo()
    this.getSettingList('出口放箱管理')
    await this.getTableData()
    setTimeout(() => {
      this.tableHeight = 664
    }, 300)
    this.getBoatCom()
    this.getBoatAndBoatT()
    this.getComInfo()
    this.getSalesmanList()
    this.getPutBoxPartList()
    this.getYard()
    this.getShipName()
    this.getBoat()
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      Picture: '',
      userCode: '',
      type: ''
    })
  },
  computed: {
    ...mapState({
      newExportBox: state => state.putbox.newExportBox
    }),
    myfieldList: function () {
      return this.fieldList.filter(function (value) {
        return value.isShow === true
      })
    }
  },
  watch: {
    newExportBox (value) {
      if (this.wsView === false) {
        return false
      } else if (value.msg === '3') {
        this.getTableData()
      } else {
      }
    }
  },
  created () {
    this.keyupSubmit()
  },
  methods: {
    async getNoticeClick () {
      let res = await getAppoinList()
      if (res.status === 200) {
        this.noticeData = res.data
        this.noticeView = true
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async getUserInfo () {
      let res = await userInfo()
      this.userType = res.data[0].userType
      // this.feeRole = res.data[0].feeRole
      if (res.status === 200) {
        // this.getSettingList('出口放箱汇总')
        // this.gitBoxHistoryData()
      } else {
        this.$notify.error({
          title: '权限获取失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    keyupSubmit () {
      document.onkeydown = e => {
        let _key = window.event.keyCode
        if (_key === 13) {
          this.serachOneTableData()
        }
      }
    },
    searNewBeuness (num) {
      this.Data.boxState = num
      this.serachOneTableData()
    },
    // searOldBeuness () {
    //   this.Data.boxState = '1'
    //   this.serachOneTableData()
    // },
    // searFunBeuness () {
    //   this.Data.boxState = '2'
    //   this.serachOneTableData()
    // },
    // searNoporBeuness () {
    //   this.Data.boxState = '4'
    //   this.serachOneTableData()
    // },
    // searBoatmorBeuness () {
    //   this.Data.boxState = '5'
    //   this.serachOneTableData()
    // },
    async changeOrderClick () {
      if (this.changeOrderPutBoxId === '') {
        this.$notify.error({
          title: '转单失败',
          message: '请选择放箱公司!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        this.loadingViewOrder = true
        let res = await transferOrder({
          userCode: this.selectedTableData[0].userCode,
          type: this.selectedTableData[0].type,
          putBoxId: this.changeOrderPutBoxId,
          mome: this.changeMome,
          import: 2
        })
        if (res.status === 200) {
          this.loadingViewOrder = false
          this.changeOrderPutBoxId = ''
          this.changeMome = ''
          this.$notify({
            title: '转单成功',
            message: '转单成功',
            type: 'success',
            duration: 1000,
            position: 'bottom-right'
          })
          this.changeOrderView = false
          this.serachTableData()
        } else {
          this.loadingViewOrder = false
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: 1000,
            position: 'bottom-right'
          })
        }
      }
    },
    async getPutBoxComList () {
      let res = await getPutBoxList({
        page: 1,
        num: 1000000
      })
      this.changeOrderPutBoxList = res.data
    },
    changeOrder () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '转单失败',
          message: '请选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else if (this.selectedTableData.length === 1) {
        // if (this.selectedTableData[0].shipAgencyId === 'b21d8795-5b1f-4632-aeef-b42183aea19c') {
        //   this.$notify.error({
        //     title: '转单失败',
        //     message: '外运无法转单!',
        //     duration: 1000,
        //     position: 'bottom-right'
        //   })
        // } else {
        this.getPutBoxComList()
        if (this.selectedTableData[0].putBoxNote === '') {
          this.changeMome = this.selectedTableData[0].mome
        } else {
          this.changeMome = this.selectedTableData[0].putBoxNote
        }
        this.changeOrderView = true
        // }
      } else {
        this.$notify.error({
          title: '转单失败',
          message: '只能选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    moreShipCom () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '修改失败',
          message: '请选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        this.selectedTableData.map((item, index, arr) => {
          if (item.transfer === '2') {
            this.$notify.error({
              title: '修改失败',
              message: '此数据里有转单数据 无法此操作!',
              duration: 1000,
              position: 'bottom-right'
            })
          } else if (item.boxState === '已完成') {
            this.$notify.error({
              title: '修改失败',
              message: '已完成数据不能修改!',
              duration: 1000,
              position: 'bottom-right'
            })
          } else {
            this.moreShipComView = true
          }
        })
        // if (this.selectedTableData.transfer === '2') {
        //   this.$notify.error({
        //     title: '修改失败',
        //     message: '此数据为转单数据 无法此操作!'
        //   })
        // } else {
        //   this.moreShipComView = true
        // }
      }
    },
    boxManVisibleChange (value) {
      this.boxManView = value
    },
    copyBoxManVisibleChange (value) {
      this.copyBoxManView = value
    },
    async dargerFiles (row) {
      let res = await delPutBoxFile({
        putBoxFileId: row.putBoxFileId
      })
      if (res.status === 200) {
        this.$notify({
          title: '删除成功',
          message: '删除成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    lookFiles (row) {
      if (row.fileType === 0) {
        this.filesImg = row.putBoxfile
        this.filesView = true
      } else {
        this.filesImgSrc = row.putBoxfile
        this.filesImgView = true
      }
    },
    noEirClickNo () {
      this.noEirView = false
      this.loadingView = false
      // let loads = new loadEvents()
      // loads.close()
      // const loading = this.$loading({
      //   fullscreen: true,
      //   lock: true,
      //   text: 'EIR接口请求中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.3)'
      // })
      // loading.close()
    },
    revokeClickNo () {
      this.revokeView = false
      this.loadingViewRevoke = false
    },
    clearContent () {
      this.serachOneTableData()
    },
    // 获取船代
    async getShipName () {
      let res = await shipAgencyList()
      this.shipAgencyNameOptions = res.data
    },
    // 获取客户信息
    async getComInfo () {
      let res = await SearchUserInfo({
        num: 1000000,
        page: 1
      })
      this.customerNameOptions = res.data
    },
    // 获取业务员信息
    async getSalesmanList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 8,
        state: 1
      }
      )
      this.salesmanOptions = res.data
    },
    // 获取放箱员信息
    async getPutBoxPartList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 9,
        state: 1
      }
      )
      this.putBoxPartOptions = res.data
    },
    // 申请时间改变搜索事件
    async applyDateChange (a) {
      if (a === null || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = a[0]
        this.Data.applyEndTime = a[1]
      }
      this.Data.page = 1
      this.Data.num = this.limit
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 清空
    clearSeach () {
      this.Data.applyDate = []
      this.Data.shipAgencyName = ''
      this.Data.company = ''
      this.Data.customerName = ''
      this.Data.boxState = '-1'
      this.Data.blno = ''
      this.Data.putBoxNote = ''
      this.Data.putBoxPartId = ''
      this.Data.theOperatorId = ''
      this.serachOneTableData()
    },
    // 船公司改变搜索事件
    async shipAgencyNameChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.shipAgencyName = a
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 客户改变搜索事件
    async custormerChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.customerName = a
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async salesmanChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.theOperatorId = a
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async putBoxPartChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.putBoxPartId = a
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 修改箱型箱量
    async setTypeNum () {
      if (this.modPublic.boxnum < 1) {
        this.$notify.error({
          title: '错误',
          message: '箱量不能小于1',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        let res = await updateBoxSize({
          userCode: this.modRow.userCode,
          boxType: this.modPublic.boxType,
          boxSize: this.modPublic.boxSize,
          boxNum: this.modPublic.boxnum,
          type: this.modRow.type,
          boatAgentId: this.modRow.boatAgentId,
          clientId: this.modRow.userIdc,
          oldBoxNum: this.modRow.num,
          relevanceBoxId: this.modRow.relevanceBoxId
        })
        if (res.status === 200) {
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success',
            duration: 1000,
            position: 'bottom-right'
          })
          this.closePopoverHandler()
          this.serachTableData()
        } else {
          this.$notify.error({
            title: '修改失败',
            message: res.msg,
            duration: 1000,
            position: 'bottom-right'
          })
        }
      }
    },
    // 修改船名船代
    async setBoatVoyage () {
      let res = await updateBoat({
        boat: this.modPublic.boat,
        voyage: this.modPublic.voyage,
        userCode: this.modRow.userCode,
        blno: this.modRow.blno,
        voucherCode: this.modRow.voucherCode,
        transfer: this.modRow.transfer,
        relevanceBussId: this.modRow.relevanceBussId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.modRow = {}
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async setBlon () {
      let res = await updateBoat({
        boat: this.modRow.boat,
        voyage: this.modRow.voyage,
        userCode: this.modRow.userCode,
        blno: this.modPublic.blno,
        voucherCode: this.modRow.voucherCode,
        transfer: this.modRow.transfer,
        relevanceBussId: this.modRow.relevanceBussId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.modRow = {}
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async setCode () {
      let res = await updateBoat({
        boat: this.modRow.boat,
        voyage: this.modRow.voyage,
        userCode: this.modRow.userCode,
        blno: this.modRow.blno,
        voucherCode: this.modPublic.voucherCode,
        transfer: this.modRow.transfer,
        relevanceBussId: this.modRow.relevanceBussId
      })
      if (this.modRow.shipAgencyId === 'b21d8795-5b1f-4632-aeef-b42183aea19c') {
        let ress = await sinotransBill({
          voucherCode: this.modPublic.voucherCode,
          userIdc: this.modRow.userIdc,
          userCode: this.modRow.userCode,
          imo: 2,
          boatAgentId: this.modRow.boatAgentId,
          boxSizeType: this.modRow.boxSizeType,
          blno: this.modRow.blno,
          shipAgencyId: this.modRow.shipAgencyId
        })
        if (ress.status === 200) {
        } else {
          this.$notify.error({
            title: '外运获取失败',
            message: ress.msg,
            duration: 3000,
            position: 'bottom-right'
          })
        }
      }
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.modRow = {}
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    chuanmingChange (val) {
      this.modPublic.boat = val.shipName
      this.modPublic.voyage = val.voyage
      // this.chuanmingOptions.map((item, index, arr) => {
      //   if (val.shipName === item.shipName) {
      //     this.modPublic.voyage = item.voyage
      //   }
      // })
    },
    yardChange (val) {
      this.modPublic.yard = val
      this.yardOptions.map((item, index, arr) => {
        if (val === item.yardName) {
          this.modPublic.yardId = item.yardId
        }
      })
    },
    async getBoat () {
      let res = await boatNameList({
        content: ''
      })
      this.chuanmingOptions = res.data
    },
    // 船名搜索
    async shipSearch (queryString, cb) {
      // var restaurants = this.chuanmingOptions
      // var results = queryString
      //   ? restaurants.filter(this.createFilter(queryString))
      //   : restaurants
      // // 调用 callback 返回建议列表的数据
      // cb(results)
      let res = await boatNameList({
        content: queryString
      })
      let {data, status} = res.data
      let restaurants = res.data
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(restaurants)
      }, 50 * Math.random())
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    async setBoatShipAndCom () {
      let boxShipList = []
      boxShipList.push({
        userCode: this.modRow.userCode,
        boxSizeType: this.modRow.boxSizeType,
        relevanceBussId: this.modRow.relevanceBussId
      })
      let res = await updateBoatAgentName({
        boatAgentName: this.modBatCompany,
        boatAgentId: this.modBatCompanyCode,
        shipAgencyId: this.modBoatShipCode,
        shipAgencyName: this.modBoatShip,
        boatList: boxShipList
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async moreShipComClick () {
      let res = await updateBoatAgentName({
        boatAgentName: this.modMoreBatCompany,
        boatAgentId: this.modMoreBatCompanyCode,
        shipAgencyId: this.modMoreBoatShipCode,
        shipAgencyName: this.modMoreBoatShip,
        boatList: this.selectedTableData
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.serachTableData()
        this.moreShipComView = false
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    modShipChange (a) {
      this.shipBoatList.map((item, index, arr) => {
        if (a === item.shipAgencyName) {
          // console.log(item.boatCompany, '123123')
          // item.boatCompany.map((itema, indexa, arra) => {
          //   if (itema.nameCncode === 'IRNL-伊朗航运EIR') {
          //     item.boatCompany.splice(1, 1)
          //   }
          //   if (itema.nameCncode === 'WOS-西联航运EIR') {
          //     item.boatCompany.splice(5, 1)
          //   }
          // })
          this.shipBoatAndList = item.boatCompany
          this.modBoatShipCode = item.shipAgencyId
          this.modBatCompany = item.boatCompany[0].nameCn
          this.modBatCompanyCode = item.boatCompany[0].boatComId
        }
      })
    },
    modMoreShipChange (a) {
      this.shipBoatList.map((item, index, arr) => {
        if (a === item.shipAgencyName) {
          // console.log(item.boatCompany, '123123')
          // item.boatCompany.map((itema, indexa, arra) => {
          //   if (itema.nameCncode === 'IRNL-伊朗航运EIR') {
          //     item.boatCompany.splice(1, 1)
          //   }
          //   if (itema.nameCncode === 'WOS-西联航运EIR') {
          //     item.boatCompany.splice(5, 1)
          //   }
          // })
          // console.log(item.boatCompany, '223')
          this.shipBoatAndList = item.boatCompany
          this.modMoreBoatShipCode = item.shipAgencyId
          this.modMoreBatCompany = item.boatCompany[0].nameCncode
          this.modMoreBatCompanyCode = item.boatCompany[0].boatComId
        }
      })
    },
    modShipComChange (a) {
      this.shipBoatAndList.map((item, index, arr) => {
        if (a === item.nameCn) {
          this.modBatCompanyCode = item.boatComId
        }
      })
    },
    modMoreShipComChange (a) {
      this.shipBoatAndList.map((item, index, arr) => {
        if (a === item.nameCn) {
          this.modMoreBatCompanyCode = item.boatComId
        }
      })
    },
    setmySales (row, column, cell, event) {
      const target = event
      this.modRow = row
      if (row.transfer === '2' || row.boxState === '已完成') {

      } else {
        if (column.label === '船代' || column.label === '船公司') {
          this.modStatus = 1
          this.modBoatShip = row.shipAgencyName
          this.modBoatShipCode = row.shipAgencyId
          this.modBatCompany = row.company
          this.modBatCompanyCode = row.boatAgentId
          this.showPopoverHandler(target, row.userCode, column.label)
          this.shipBoatList.map((item, index, arr) => {
            if (row.shipAgencyName === item.shipAgencyName) {
              // item.boatCompany.map((itema, indexa, arra) => {
              //   if (itema.nameCncode === 'IRNL-伊朗航运EIR') {
              //     item.boatCompany.splice(1, 1)
              //   }
              //   if (itema.nameCncode === 'WOS-西联航运EIR') {
              //     item.boatCompany.splice(5, 1)
              //   }
              // })
              this.shipBoatAndList = item.boatCompany
            }
          })
        } else if (column.label === '放箱备注') {
          this.modStatus = 2
          this.modPutBoxNote = row.putBoxNote
          this.showPopoverHandler(target, row.userCode, column.label)
        } else if (column.label === '船名' || column.label === '航次') {
          this.modStatus = 3
          this.modPublic.boat = row.boat
          this.modPublic.voyage = row.voyage
          this.showPopoverHandler(target, row.userCode, column.label)
        } else if (column.label === '提单号') {
          this.modStatus = 4
          this.modPublic.blno = row.blno
          this.showPopoverHandler(target, row.userCode, column.label)
        } else if (column.label === '制单码') {
          this.modStatus = 5
          this.modPublic.voucherCode = row.voucherCode
          // console.log(row, 'rowdata')
          // console.log(row.voucherCode, 'rowdataCode')
          this.transferObj = row.transfer
          this.shipAgencyIdObj = row.shipAgencyId
          this.showPopoverHandler(target, row.userCode, column.label)
        } else if (column.label === '箱型箱量') {
          this.modStatus = 6
          this.modPublic.boxSize = row.boxSize
          this.modPublic.boxType = row.boxType
          this.modPublic.boxnum = row.num
          this.showPopoverHandler(target, row.userCode, column.label)
        } else if (column.label === '提箱点') {
          this.modStatus = 7
          this.modPublic.yard = row.yard
          this.showPopoverHandler(target, row.userCode, column.label)
        }
      }
    },
    // 公共部分
    closePopoverHandler () {
      this.cacheId = ''
      this.cacheColumnLabel = ''
      this.showPopover = false
      // this.$refs.operationPopover.$refs.popper.removeAttribute('style')
    },
    // 绑定显示popover方法
    showPopoverHandler (element, id, label) {
      // 显示、隐藏条件
      if (this.cacheId === id && this.cacheColumnLabel === label) {
        this.showPopover = !this.showPopover
        return
      } else {
        this.cacheId = id
        this.cacheColumnLabel = label
        this.showPopover = true
      }
      // 设置popover样式
      const popper = this.$refs.operationPopover.$refs.popper
      if (this.showPopover) {
        setTimeout(() => {
          const left = element.clientX
          const top = element.clientY
          // if (this.modStatus === 1 || this.modStatus === 3) {
          //   popper.setAttribute('style', `position: fixed; top: ${top - 70}px; left: ${left - 120}px;`)
          // } else if (this.modStatus === 2) {
          //   popper.setAttribute('style', `position: fixed; top: ${top - 70}px; left: ${left - 120}px;`)
          // }
          popper.setAttribute('style', `position: fixed; top: ${top - 70}px; left: ${left - 120}px;`)
        }, 100) // 100ms延迟,等待dom渲染
      } else {
        popper.removeAttribute('style')
      }
    },
    // 获取popover距离顶部、左侧的位置
    // getPopoverPosition (element) {
    //   let top = element.offsetTop
    //   let left = element.offsetLeft
    //   let current = element.offsetParent
    //   while (current !== null) {
    //     top += current.offsetTop
    //     left += current.offsetLeft
    //     current = current.offsetParent
    //   }
    //   return { top, left }
    // },
    async getBoatAndBoatT () {
      let res = await shipCompanyList({
        import: 2
      })
      this.shipBoatList = res.data
    },
    async Revoke () {
      this.selectedTableData.map((item, index, arr) => {
        if (item.transfer === '2') {
          this.$notify.error({
            title: '撤销失败',
            message: '此数据里有转单数据 无法此操作!',
            duration: 1000,
            position: 'bottom-right'
          })
        } else if (item.boxState === '已完成') {
          this.$notify.error({
            title: '修改失败',
            message: '已完成数据不能修改!',
            duration: 1000,
            position: 'bottom-right'
          })
        } else {
          this.loadingViewRevoke = true
          this.revokePost()
        }
      })
    },
    RevokeView () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '撤销失败',
          message: '请选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        this.revokeView = true
      }
    },
    async revokePost () {
      let res = await revocation({
        userCodeList: this.selectedTableData
      })
      if (res.status === 200) {
        this.$notify({
          title: '撤销成功',
          message: '撤销成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.loadingViewRevoke = false
        this.revokeView = false
        this.serachTableData()
      } else {
        this.loadingViewRevoke = false
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    tableRowClass ({row, column, rowIndex, columnIndex}) {
      // console.log(column)
      // if (column.property === 'putBoxNote') {
      //   console.log(column.width, '11111')
      //   if (column.realWidth !== 130) {
      //     console.log(column.realWidth, '22222')
      //     return ''
      //   }
      // }
      // console.log()
      if (column.label === '提单号') {
        if (row.isRed === '1') {
          return 'color: red;'
        }
      }

      if (column.property === 'boxState') {
        // if (row.boxState === '新业务') {
        //   this.backgroundColor = '#3c8dbc'
        // }
        // if (row.boxState === '放单中') {
        //   this.backgroundColor = '#67C23A'
        // }
        // if (row.boxState === '已完成') {
        //   this.backgroundColor = '#909399'
        // }
        // if (row.boxState === '已拒绝') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '没预配') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '船期早') {
        //   this.backgroundColor = '#409EFF'
        // }
        // if (row.boxState === '明天放') {
        //   this.backgroundColor = '#409EFF'
        // }
        // if (row.boxState === '已退关') {
        //   this.backgroundColor = '#409EFF'
        // }
        // if (row.boxState === '等通知') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '客户取消') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '退单') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '申请中') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '爆仓') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '有问题') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '缺箱子') {
        //   this.backgroundColor = '#F56C6C'
        // }
        // if (row.boxState === '已处理') {
        //   this.backgroundColor = '#409EFF'
        // }
        // if (row.boxState === '新业务') {
        //   this.backgroundColor = '#409EFF'
        // }
        // if (row.boxState === '新业务') {
        //   this.backgroundColor = '#3c8dbc'
        // }
        // switch (row.boxState) {
        //   case '':
        //     return this.backgroundColor = '#3c8dbc'
        //   case '放单中':
        //     return this.backgroundColor = '#67C23A'
        //   case '已完成':
        //     return this.backgroundColor = '#909399'
        //   case '已拒绝':
        //     return this.backgroundColor = '#F56C6C'
        //   case '没预配':
        //     return this.backgroundColor = '#F56C6C'
        //   case '船期早':
        //     return this.backgroundColor = '#409EFF'
        //   case '明天放':
        //     return this.backgroundColor = '#409EFF'
        //   case '已退关':
        //     return this.backgroundColor = '#409EFF'
        //   case '等通知':
        //     return this.backgroundColor = '#F56C6C'
        //   case '客户取消':
        //     return this.backgroundColor = '#F56C6C'
        //   case '退单':
        //     return this.backgroundColor = '#F56C6C'
        //   case '申请中':
        //     return this.backgroundColor = '#F56C6C'
        //   case '爆仓':
        //     return this.backgroundColor = '#F56C6C'
        //   case '有问题':
        //     return this.backgroundColor = '#F56C6C'
        //   case '缺箱子':
        //     return this.backgroundColor = '#F56C6C'
        //   case '已处理':
        //     return this.backgroundColor = '#409EFF'
        //   default:
        //     return this.backgroundColor = 'black'
        // }
      } else if (column.label === '船代' || column.label === '船公司' || column.label === '船名' || column.label === '航次' || column.label === '提单号' || column.label === '尺寸' || column.label === '箱型' || column.label === '数量' || column.label === '放箱备注' || column.label === '制单码' || column.label === '提箱点') {
        return 'padding: 0px 5px !important;'
      } else {
        return ''
      }
    },
    tableRowClassName (a) {
      if (a.row.transfer === '1') {
        return 'yellowColor'
      }
      if (a.row.transfer === '2') {
        return 'orangeColor'
      }
    },
    async modYard () {
      let res = await updateYard({
        userCode: this.modRow.userCode,
        boxSizeType: this.modRow.boxSizeType,
        blno: this.modRow.blno,
        yardName: this.modPublic.yard,
        yardId: this.modPublic.yardId,
        shipAgencyId: this.modRow.shipAgencyId,
        boatComId: this.modRow.boatAgentId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async getYard () {
      let res = await yardList({
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      })
      this.yardOptions = res.data
    },
    handleAvatarSuccess (res, file) {
      if (res.status === 200) {
        this.$notify({
          title: '上传成功',
          message: '上传成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.serachTableData()
      } else {
        this.$notify({
          title: '上传失败',
          message: res.msg,
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    handleAvatarError (res, row, list) {
    },
    uploadFiles (a, b) {
      this.uploadData.userCode = b.userCode
      this.uploadData.type = b.type
    },
    beforeAvatarUpload (file) {
      this.uploadData.Picture = file
    },
    async companyChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.company = a
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async boxFeeClick (status) {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '修改失败',
          message: '请选择数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        let res = await updateBoxFeeStatus({
          boxFeeStatus: status,
          codeList: this.selectedTableData
        })
        if (res.status === 200) {
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success',
            duration: 1000,
            position: 'bottom-right'
          })
          this.serachTableData()
        } else {
          this.$notify.error({
            title: '修改失败',
            message: res.msg,
            duration: 1000,
            position: 'bottom-right'
          })
        }
      }
    },
    async setPutBoxNote () {
      let res = await updatePutBoxNote({
        putBoxNote: this.modPutBoxNote,
        userCode: this.modRow.userCode,
        type: this.modRow.type,
        relevanceBoxId: this.modRow.relevanceBoxId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.closePopoverHandler()
        this.serachTableData()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async getBoatCom () {
      let res = await boatCompanyList({
        nameCncode: ''
      })
      this.chuangongshiOptions = res.data
      // this.chuangongshiOptions.map((item, index, arr) => {
      //   if(item.)
      // })
    },
    // 选中表格
    handleSelectionChange (val) {
      this.selectedTableData = val
    },
    // 导出数据到Excel
    async exportData () {
      if (this.tableData.length === 0) {
        this.$message({
          message: '没有数据，请添加数据后再导出！',
          type: 'warning'
        })
        return false
      }
      if (this.selectedTableData.length === 0) {
        this.mydata = JSON.parse(JSON.stringify(this.tableData))
      } else {
        this.mydata = this.selectedTableData
      }
      let myobj = {
        Row: '序号',
        boxState: '状态',
        clientName: '客户名称',
        boat: '船名',
        voyage: '航次',
        blno: '提单号',
        yard: '提箱点',
        boxSizeType: '箱型箱量',
        mome: '客户备注',
        // sumMoney: '总费用',
        putBoxNote: '放箱备注',
        clientMobile: '客户电话',
        fullName: '业务员',
        applyTime: '申请时间',
        company: '船公司'
      }
      this.mydata.unshift(myobj)
      const res = await exportToExcel({
        jsonStr: JSON.stringify(this.mydata), // JSON字符串
        fileName: '', // 文件名
        sheetName: '出口放箱', // 表名
        comName: '', // 公司名称
        comPhone: '', // 公司电话
        comFax: '', // 公司传真
        tableName: '出口放箱', // 表格标题
        clientName: '出口放箱'
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        window.location.href = res.data[0].path
        this.serachTableData()
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 修改订单状态
    async modifyBoxState (index) {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '修改失败',
          message: '请选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else {
        let statusTarn = 1
        this.selectedTableData.map((item, index, arr) => {
          if (item.transfer === '2') {
            statusTarn = 2
            this.$notify.error({
              title: '修改失败',
              message: '数据里有已转单数据！',
              duration: 1000,
              position: 'bottom-right'
            })
          }
        })
        if (statusTarn === 1) {
          let codeList = []
          this.selectedTableData.map((item, index, arry) => {
            codeList.push({
              userCode: item.userCode,
              boxSizeType: item.boxSizeType,
              blno: item.blno,
              clientName: item.clientName,
              userIdc: item.userIdc,
              boatAgentId: item.boatAgentId,
              shipAgencyId: item.shipAgencyId,
              status: item.orderStatus,
              transfer: item.transfer,
              relevanceBoxId: item.relevanceBoxId
            })
          })
          this.loadingView = true
          let res = await updateBoxState({
            state: index,
            putBoxManageComId: this.selectedTableData[0].putBoxManageComId,
            codeList: codeList
          })
          if (res.status === 200) {
            this.serachTableData()
            this.loadingView = false
            this.$notify({
              title: '修改成功',
              message: '修改成功',
              type: 'success',
              duration: 1000,
              position: 'bottom-right'
            })
          } else if (res.status === 206) {
            this.noEirView = true
          } else {
            this.loadingView = false
            this.$notify.error({
              title: '修改失败',
              message: res.msg,
              duration: 1000,
              position: 'bottom-right'
            })
          }
        }
      }
    },
    // EIR未获取确定事件
    async noEirClick () {
      let codeList = []
      this.selectedTableData.map((item, index, arry) => {
        codeList.push({
          userCode: item.userCode,
          boxSizeType: item.boxSizeType,
          blno: item.blno,
          clientName: item.clientName,
          userIdc: item.userIdc,
          boatAgentId: item.boatAgentId,
          shipAgencyId: item.shipAgencyId,
          status: item.orderStatus,
          transfer: item.transfer,
          relevanceBoxId: item.relevanceBoxId
        })
      })
      this.loadingViewNoEir = true
      let res = await updateBoxState({
        state: 2,
        putBoxManageComId: this.selectedTableData[0].putBoxManageComId,
        codeList: codeList,
        makeSure: 1
      })
      // let loads = new loadEvents()
      // const loading = this.$loading({
      //   fullscreen: true,
      //   lock: true,
      //   text: 'EIR接口请求中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.3)'
      // })

      if (res.status === 200) {
        this.serachTableData()
        // loads.close()
        this.loadingViewNoEir = false
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
        this.noEirView = false
      } else {
        // loads.close()
        this.loadingViewNoEir = false
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 获取列表数据
    async getTableData () {
      this.Data.page = this.page
      this.Data.num = this.limit
      this.loadingView = true
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.loadingView = false
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async getTableDataPage () {
      this.Data.page = this.page
      this.Data.num = this.limit
      this.loadingView = true
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.loadingView = false
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 新增订单
    newOrder () {
      this.boxManView = true
    },
    // 复制订单
    copyOrder () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '复制失败',
          message: '请选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      } else if (this.selectedTableData.length === 1) {
        this.copyBoxManView = true
      } else {
        this.$notify.error({
          title: '复制失败',
          message: '只能选择一条数据!',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 查询
    async serachTableData () {
      this.Data.page = this.page
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.loadingView = false
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    async serachOneTableData () {
      this.Data.page = 1
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await putBoxList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.page = 1
        this.loadingView = false
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // async searSeach () {
    //   this.Data.page = this.page
    //   this.Data.num = this.limit
    //   const res = await putBoxList(this.Data)
    //   if (res.status === 200) {
    //     this.tableData = res.data
    //   } else {
    //     this.$notify.error({
    //       title: '错误',
    //       message: '请联系客服!'
    //     })
    //   }
    // },
    detailsViewVisibleChange (value) {
      this.detailsView = value
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    handleSizeChange (val) {
      this.limit = val
      this.serachTableData()
    },
    parentName () {
      this.serachOneTableData()
      this.getSettingList('出口放箱管理')
    },
    changtype (e) {
      this.allList.map((item, index) => {
        if (item.styleId === e) {
          this.fieldList = this.allList[index].returnList
        }
      })
    },
    // 上传默认数据
    async defaultData (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        console.log(pgnm, '初始化默认顺序')
        this.getSettingList(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 获取设置列表
    async getSettingList (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '序号', props: 'row', isShow: 0, width: 35, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '状态', props: 'boxState', isShow: 0, width: 50, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '用箱人', props: 'clientName', isShow: 0, width: 75, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代', props: 'shipAgencyName', isShow: 0, width: 70, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船公司', props: 'company', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船名', props: 'boat', isShow: 0, width: 180, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '航次', props: 'voyage', isShow: 0, width: 90, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提单号', props: 'blno', isShow: 0, width: 165, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '箱型箱量', props: 'boxSizeType', isShow: 0, width: 80, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            // { field: '箱型', props: 'boxType', isShow: 0, width: 35, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            // { field: '数量', props: 'num', isShow: 0, width: 35, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '要求', props: 'mome', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱备注', props: 'putBoxNote', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '转单回复', props: 'turnReply', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提箱点', props: 'yard', isShow: 0, width: 125, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '制单码', props: 'voucherCode', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '做箱时间', props: 'startTime', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '业务员', props: 'fullName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱员', props: 'putBoxPartName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '车队录单员', props: 'record', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '申请时间', props: 'applyTime', isShow: 0, width: 120, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '修改时间', props: 'updateTime', isShow: 0, width: 120, colour: '', styleId: '', styleName: '默认样式', styleType: 1 }
          ]
          this.defaultData(myList, pgnm)
        } else {
          let myid = ''
          if (res.showStyleId === '') {
            myid = 0
          }
          res.data.map((value, index) => {
            if (value.styleId === res.showStyleId) {
              myid = index
            }
            value.returnList.map(item => {
              if (item.isShow === '0') {
                item.isShow = true
              } else {
                item.isShow = false
              }
            })
          })
          this.allList = res.data
          this.listIndex = res.showStyleId
          this.fieldList = res.data[myid].returnList
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 子组件方法
    closeL () {
      this.open = false
    },
    // 打开列表设置
    tableSetting () {
      this.allStr = JSON.stringify(this.allList)
      this.fieldStr = JSON.stringify(this.fieldList)
      // this.getSettingList(this.pageName)
      this.getSettingList('出口放箱管理')
      if (this.key) {
        this.open = true
      }
    }
    // ...mapActions({
    //   'updateExportBoxState': 'putbox/updateExportBoxState'
    // })
  }
}
</script>

<style lang="less">
.el-autocomplete-suggestion {
    width: auto !important;
}
.drop-box-man {
  .blueBtn {
    color: #409EFF;
  }
  .yellowBtn {
    color: #E6A23C;
  }
  .redBtn {
    color: #F56C6C;
  }
  .yellowColor {
    background-color: lightyellow;
  }
  .orangeColor {
    background-color: #f8dcb6;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 3px !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 0px !important;
  }
  .el-table td, .el-table th {
    padding: 0;
  }
// .yardColor {
//     background: #f3e3e3,
//   }
// .el-input__inner {
//     width: 136px;
//     height: 28px;
//     line-height: 28px;
//   }
  .pagenation {
  margin-left: 20px;
  font-size: 14px;
  input {
    width: 100px
  }
}
.oper-row {
  position: relative;
  padding: 0px 0;
  &.filter {
    .right {
      padding-left: 80px;
    }
  }
  .label {
    position: absolute;
    margin-right: 20px;
    display: inline-block;
    top: 8px;
    left: 0;
  }
  .right {
    padding-left: 0px;
    >* {
      margin-top: 5px;
    }
    span {
      cursor: pointer;
    }
  }
}
}
</style>
